<script setup>
import { ref } from 'vue'
import userStore from '../store'

const { todos } = userStore()
const todoName = ref('')

//  利用仓库添加待办事项
const addName = (e) => {
  if (e.key === 'Enter' && todoName.value.trim()) {
    todos.addTodo(todoName.value)
    todoName.value = ''
  }
}
</script>

<template>
  <header class="header">
    <h1>todos</h1>
    <input
      class="new-todo"
      placeholder="待办事项?"
      autofocus
      v-model="todoName"
      @keyup.enter="addName"
    />
  </header>
</template>
